<div class="editor-row">
  <div class="section gf-form-group">
    <h5 class="section-heading">Show fields</h5>
    <gf-form-switch class="gf-form"
      label-class="width-9"
      label="Host name"
      checked="ctrl.panel.hostField"
      on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch class="gf-form"
      label-class="width-9"
      label="Technical name"
      checked="ctrl.panel.hostTechNameField"
      on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch class="gf-form"
      label-class="width-9"
      label="Host groups"
      checked="ctrl.panel.hostGroups"
      on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch class="gf-form"
      label-class="width-9"
      label="Host proxy"
      checked="ctrl.panel.hostProxy"
      on-change="ctrl.refresh()">
    </gf-form-switch>
    <gf-form-switch class="gf-form"
      label-class="width-9"
      label="Tags"
      checked="ctrl.panel.showTags"
      on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch class="gf-form"
      label-class="width-9"
      label="Status"
      checked="ctrl.panel.statusField"
      on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch ng-if="ctrl.panel.layout === 'table'"
      class="gf-form"
      label-class="width-9"
      label="Status Icon"
      checked="ctrl.panel.statusIcon"
      on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch class="gf-form"
      label-class="width-9"
      label="Severity"
      checked="ctrl.panel.severityField"
      on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch class="gf-form"
      label-class="width-9"
      label="Age"
      checked="ctrl.panel.ageField"
      on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch ng-if="ctrl.panel.layout === 'list'"
      class="gf-form"
      label-class="width-9"
      label="Description"
      checked="ctrl.panel.descriptionField"
      on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch ng-if="ctrl.panel.descriptionField && ctrl.panel.layout === 'list'"
      class="gf-form"
      label-class="width-9"
      label="At the new line"
      checked="ctrl.panel.descriptionAtNewLine"
      on-change="ctrl.render()">
    </gf-form-switch>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">Options</h5>
    <gf-form-switch class="gf-form"
      label-class="width-15"
      label="Show hosts in maintenance"
      checked="ctrl.panel.hostsInMaintenance"
      on-change="ctrl.render()">
    </gf-form-switch>
    <div class="gf-form">
      <label class="gf-form-label width-8">Acknowledged</label>
      <div class="gf-form-select-wrapper width-12">
        <select class="gf-form-input"
          ng-model="ctrl.panel.showTriggers"
          ng-options="f for f in editor.ackFilters"
          ng-change="ctrl.refresh()">
        </select>
      </div>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-8">Sort by</label>
      <div class="gf-form-select-wrapper width-12">
        <select class="gf-form-input"
          ng-model="ctrl.panel.sortTriggersBy"
          ng-options="f.text for f in editor.sortByFields track by f.value"
          ng-change="ctrl.render()">
        </select>
      </div>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-8">Show events</label>
      <div class="gf-form-select-wrapper width-12">
        <select class="gf-form-input"
          ng-model="ctrl.panel.showEvents"
          ng-options="f.text for f in editor.showEventsFields track by f.value"
          ng-change="ctrl.refresh()">
        </select>
      </div>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-8">Limit triggers</label>
      <input class="gf-form-input width-5"
        type="number" placeholder="100"
        ng-model="ctrl.panel.limit"
        ng-model-onblur ng-change="ctrl.refresh()">
    </div>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">View options</h5>
    <div class="gf-form">
      <label class="gf-form-label width-10">Layout</label>
      <div class="gf-form-select-wrapper max-width-8">
        <select class="gf-form-input"
          ng-model="ctrl.panel.layout"
          ng-options="opt.value as opt.text for opt in editor.layouts"
          ng-change="ctrl.render()"></select>
      </div>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-10">Font size</label>
      <div class="gf-form-select-wrapper max-width-8">
        <select class="gf-form-input"
            ng-model="ctrl.panel.fontSize"
            ng-options="f for f in editor.fontSizes"
            ng-change="ctrl.render()"></select>
      </div>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-10">Page size</label>
      <input class="gf-form-input width-8"
        type="number" placeholder="10"
        ng-model="ctrl.panel.pageSize"
        ng-model-onblur ng-change="ctrl.render()">
    </div>
    <gf-form-switch ng-if="ctrl.panel.layout === 'table'"
      class="gf-form"
      label-class="width-10"
      label="Problem timeline"
      checked="ctrl.panel.problemTimeline"
      on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch ng-if="ctrl.panel.layout !== 'table'"
      class="gf-form"
      label-class="width-10"
      label="Highlight background"
      checked="ctrl.panel.highlightBackground"
      on-change="ctrl.render()">
    </gf-form-switch>
    <gf-form-switch class="gf-form"
      label-class="width-10"
      label="Highlight new events"
      checked="ctrl.panel.highlightNewEvents"
      on-change="ctrl.render()">
    </gf-form-switch>
    <div class="gf-form">
      <label class="gf-form-label width-10">Newer than</label>
      <input class="gf-form-input width-8" placeholder="1h"
        ng-model="ctrl.panel.highlightNewerThan"
        ng-model-onblur ng-change="ctrl.render()">
    </div>
    <gf-form-switch class="gf-form"
      label-class="width-16"
      label="Custom Last change format"
      checked="ctrl.panel.customLastChangeFormat"
      on-change="ctrl.render()">
    </gf-form-switch>
    <div class="gf-form" ng-if="ctrl.panel.customLastChangeFormat">
      <label class="gf-form-label width-3">
        <a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
          <tip>See moment.js dosc for time format.</tip>
        </a>
      </label>
      <input class="gf-form-input width-18"
        type="text"
        placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
        empty-to-null
        ng-model-onblur
        ng-model="ctrl.panel.lastChangeFormat"
        ng-change="ctrl.render()">
    </div>
    <div class="gf-form" ng-if="ctrl.panel.layout === 'table'">
      <div class="gf-form-button">
        <button class="btn btn-inverse width-16 panel-options-button" ng-click="ctrl.resetResizedColumns()">
          Reset resized columns
        </button>
      </div>
    </div>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">Triggers severity and colors</h5>
    <div class="gf-form-inline" ng-repeat="trigger in ctrl.panel.triggerSeverity">
      <div class="gf-form">
        <label class="gf-form-label width-3">{{ trigger.priority }}</label>
        <label class="gf-form-label triggers-severity-config"
          ng-style="{color: trigger.color}">
          <i class="icon-gf" ng-class="ctrl.getAlertIconClassBySeverity(trigger)"></i>
        </label>
        <input type="text"
          class="gf-form-input width-12"
          empty-to-null
          ng-model="trigger.severity"
          ng-model-onblur
          ng-change="ctrl.render()">
        <span class="gf-form-label">
          <spectrum-picker ng-model="trigger.color" ng-change="ctrl.render()"></spectrum-picker>
        </span>
      </div>
      <gf-form-switch class="gf-form"
        label-class="width-0"
        label="Show"
        checked="trigger.show"
        on-change="ctrl.refresh()">
      </gf-form-switch>
    </div>

    <div class="gf-form-inline">
      <div class="gf-form">
        <label class="gf-form-label width-3">&nbsp;</label>
        <label class="gf-form-label triggers-severity-config"
          ng-style="{color: ctrl.panel.ackEventColor}">
          <i class="icon-gf icon-gf-online"></i>
        </label>
        <label class="gf-form-label width-12">
          Acknowledged color
        </label>
        <span class="gf-form-label">
          <spectrum-picker ng-model="ctrl.panel.ackEventColor" ng-change="ctrl.render()"></spectrum-picker>
        </span>
      </div>
      <gf-form-switch class="gf-form"
        label-class="width-0"
        label="Show"
        checked="ctrl.panel.markAckEvents"
        on-change="ctrl.refresh()">
      </gf-form-switch>
    </div>
    <div class="gf-form-inline">
      <div class="gf-form">
        <label class="gf-form-label width-3">&nbsp;</label>
        <label class="gf-form-label triggers-severity-config"
          ng-style="{color: ctrl.panel.okEventColor}">
          <i class="icon-gf icon-gf-online"></i>
        </label>
        <label class="gf-form-label width-12">
          OK event color
        </label>
        <span class="gf-form-label">
          <spectrum-picker ng-model="ctrl.panel.okEventColor" ng-change="ctrl.render()"></spectrum-picker>
        </span>
      </div>
    </div>
  </div>
</div>
